<template>
  <div class="bigscreen-main">
    <el-row :gutter="0">
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
          <el-row :gutter="0">
            <el-col :span="24">
              <vBarStack :city="city" :parent_items="items"></vBarStack>
            </el-col>
             <el-col :span="24">
              <vParrallel :city="city" :parent_items="items"></vParrallel>
            </el-col>
            </el-row>
        </el-col>

      
      <el-col :xs="24" :sm="24" :md="12" :lg="10" :xl="10" class="bigscreen-map">
        <vChinaMap @updata-selected-city="cityChange" :parent_items="items"></vChinaMap>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <el-row :gutter="0">
          <el-col :span="24">
            <vBar :city="city" :parent_items="items"></vBar>
          </el-col>
          <el-col :span="24">
            <vHeatmap :city="city" :parent_items="items"></vHeatmap>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row :gutter="0">
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="16">
        <vRaderMap :city="city" :parent_items="items"></vRaderMap>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
         <v3dBar :parent_items="items"></v3dBar>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import dataApi from '@/api/data'
import vChinaMap from "@/components/custom/animationChinaMap";
import vParrallel from "@/components/custom/forestParallel";
import vHeatmap from "@/components/custom/animationHeatmap";
import vRaderMap from "@/components/custom/animationRadar";
import vBar from "@/components/custom/animationBar";
import vBarStack from "@/components/custom/forestBarStack";
import v3dBar from "@/components/custom/forest3D";
export default {
  components: {
    vChinaMap,
    vParrallel,
    vHeatmap,
    vRaderMap,
    vBar,
    vBarStack,
    v3dBar
  },
  data() {
    return {
      city: "",
      items:[],
    };
  },
  mounted() {},
  created() {
    dataApi.getData().then(res=>{
      this.items = res.data.items
    })
  },
  methods: {
    cityChange(item) {
      this.city = item;
      //console.log(this.city);
    },
  },
};
</script>

<style >
::-webkit-scrollbar {

  display: none;
}
.bigscreen-map{
}
.bigscreen-main{
  background-color: #282a36;
}
.row {
  width: 100%;
}
</style>